/**
* 物料申请
*/
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
                        <el-form-item prop="ztList">
                            <template #label><vp-label zh="状态" en="Status" /></template>
                            <el-select class="w100" v-model="searchForm.ztList" multiple collapse-tags>
                                <el-option :value="10" label="保存 Save"></el-option>
                                <el-option :value="88" label="审批中 Processing"></el-option>
                                <el-option :value="89" label="已审批 Processed"></el-option>
                                <el-option :value="98" label="作废 Invalid"></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
					<vp-search-col>
						<el-form-item prop="jx">
							<template #label><vp-label zh="物料类型" en="Material Cat." /></template>
							<el-select v-model="searchForm.wllx" placeholder="请选择" clearable>
								<el-option label="航材" :value="10"><vp-label zh="航材" en="Aircraft Material"></vp-label></el-option>
								<el-option label="化工品" :value="20"><vp-label zh="化工品" en="Chemical"></vp-label></el-option>
								<el-option label="工具" :value="30"><vp-label zh="工具" en="Tool"></vp-label></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zwms">
							<template #label><vp-label zh="名称" en="Name" /></template>
							<el-input v-model="searchForm.zwms" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jh">
							<template #label><vp-label zh="件号/产品名" en="Product Name" /></template>
							<el-input v-model="searchForm.jh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="hcjz">
							<template #label><vp-label zh="航材价值" en="" /></template>
							<VpDictSelect :lxid="403" :selectedId="searchForm.hcjz"
								@dictSelected="obj => { searchForm.hcjz = obj; }" style="width:100%">
							</VpDictSelect>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item>
							<template #label><vp-label zh="适用机型" en="Applicable AC Type" /></template>
							<BasedataModelSelectDialog v-model:value="searchForm.acTypeList"
								@basedataModelSelected="basedataModelSelectedHandle" />
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'materialMaterialApply.edit'" @click="handleAdd" />
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				 <vxe-column field="zt" show-overflow width="160">
                    <template #header><vp-label zh="状态" en="Status" /></template>
                    <template #default="scope">
                        {{
                            scope.row.zt === 10 ? '草稿 Draft' :
                                scope.row.zt === 88 ? '审批中 Processing' :
                                    scope.row.zt === 89 ? '生效/Effect' :
                                        scope.row.zt === 98 ? '作废 Invalid' : ''
                        }}
                    </template>
                </vxe-column>
				<vxe-column field="wllx" show-overflow width="200">
					<template #header><vp-label zh="物料类型" en="Material Cat." /></template>
					<template #default="scope">
						<vp-label v-if="scope.row.wllx == 10" zh="航材" en="Aircraft Material" />
						<vp-label v-else-if="scope.row.wllx == 20" zh="化工品" en="Chemical" />
						<vp-label v-else-if="scope.row.wllx == 30" zh="工具" en="Tool" />
					</template>
				</vxe-column>
				<vxe-column field="jh" show-overflow>
					<template #header><vp-label zh="件号/产品名" en="P/N" /></template>
				</vxe-column>
				<vxe-column field="zwms" show-overflow>
					<template #header><vp-label zh="名称" en="Name" /></template>
					<template #default="{ row }">
						中:{{ row.zwms }} 英:{{ row.ywms }}
					</template>
				</vxe-column>
				<vxe-column field="syjx" show-overflow>
					<template #header><vp-label zh="适用机型" en="Applicable AC Type" /></template>
					<template #default="{ row }">
						{{ row.syjx == 10 ? 'ALL' : row.actTypeName }}
					</template>
				</vxe-column>
				<vxe-column field="gljb" show-overflow width="140">
					<template #header><vp-label zh="管理级别" en="Management Level" /></template>
					<template #default="{ row }">
						{{ row.gljb == 10 ? '序列号管理' : row.gljb == 20 ? '批次号管理' : '' }}
					</template>
				</vxe-column>
				<vxe-column field="whsj" show-overflow>
					<template #header><vp-label zh="维护时间" en="Edit Time" /></template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" width="140">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt == 10" v-auth="'materialMaterialApply.edit'" text @click="handleEdit(scope.row)" />
							<vp-btn-del v-if="scope.row.zt == 10" v-auth="'materialMaterialApply.edit'" text @click="handleDelete(scope.row)" />
							<vp-btn-view  text @click="handleView(scope.row)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>

		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
		<EditMaterialApply ref="editMaterialApplyRef" @formSubmited="handleFormSubmited"></EditMaterialApply>
	</vp-main-page>
</template>
<script setup lang="ts" name="materialMaterialApply">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';
import EditMaterialApply from './component/EditMaterialApply.vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import BasedataModelSelectDialog from '/@/components/vp/basedata/basedataModelSelectDialog.vue';

import { useRouter } from 'vue-router';
const router = useRouter();


const searchForm = reactive({
	acTypeList: [],
	ztList:[],
	jh: "",
	zwms: "",
	wllx: null,
	qyzt: null,
	hcjz: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/material/materialApply/pageList', {
		params: {
			...searchForm,
			...page
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchForm.acTypeList = [];
	searchForm.ztList = [];
	searchForm.jh = "";
	searchForm.zwms = "";
	searchForm.wllx = null;
	searchForm.qyzt = null;
	searchForm.hcjz = "";
	searchFormRef.value.resetFields();
	loadDataList();
}

onMounted(() => {
	loadDataList();
})

const editMaterialApplyRef = ref();
const tableRef = ref();

const handleAdd = () => {
	editMaterialApplyRef.value.handleOpen({
		type: 'add'
	});
}

const handleEdit = (row: any) => {
	editMaterialApplyRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = () => {
	loadDataList();
}

const handleView = (row: any) => {
	router.push({
		name: "viewMaterialMaterialApply",
		params: {
			id: row.id,
		},
	})
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		loading.value = true;
		request.delete(`/material/materialApply/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	});
}

const basedataModelSelectedHandle = (data: any) => {
	searchForm.acTypeList = data;
}

</script>